<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>加盟合作</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <meta name="viewport"
          content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!--1.width=device-width    //应用程序的宽度和屏幕的宽度是一样的
2.height=device-height  //应用程序的高度和屏幕的高是一样的
3.initial-scale=1.0  //应用程序启动时候的缩放尺度（1.0表示不缩放）
4.minimum-scale=1.0  //用户可以缩放到的最小尺度（1.0表示不缩放）
5.maximum-scale=1.0  //用户可以放大到的最大尺度（1.0表示不缩放）
6.user-scalable=no  //用户是否可以通过他的手势来缩放整个应用程序，使应用程序的尺度发生一个改变（yes/no）
    -->
    <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="iconfont/iconfont.css">
    <link rel="stylesheet" href="style/weui.min.css"/>
    <link rel="stylesheet" href="style/style.css"/>
</head>
<body class="skin-gray" ontouchstart>
<div class="fix-foot-content">
    <!--盒子-->
    <div class="per-box">
        <!--盒子标题-->
       <!-- <h4 class="box-title text-green"><i class="iconfont icon-xiangqing"></i> 博美信息中心系统 - 加盟合作</h4>-->
        <!--盒子标题-->
        <div class="logo-box">
            <img src="images/logosmall.png" alt="" class="logo-title"> 博美信息中心
        </div>
        <!--end 盒子标题-->

        <!-- 身份选择 -->
        <div class="weui-cells__title">身份选择</div>
        <div class="weui-cells weui-cells_radio inline-radio-box">
            <!--单行-->
            <div class="weui-flex">
                <!--选项-->
                <div class="weui-flex__item">
                    <div class="placeholder">
                        <label class="weui-cell weui-check__label" for="x11">

                            <div class="weui-cell__bd">
                                <p>开发商</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input type="radio" name="radio1" class="weui-check" id="x11" checked="checked">
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>
                    </div>
                </div>
                <!-- end -->
                <!--选项-->
                <div class="weui-flex__item">
                    <div class="placeholder">
                        <label class="weui-cell weui-check__label" for="x12">
                            <div class="weui-cell__bd">
                                <p>厂商</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input type="radio" class="weui-check" name="radio1" id="x12">
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>
                    </div>
                </div>
                <!-- end -->
                <!--选项-->
                <div class="weui-flex__item">
                    <div class="placeholder">
                        <label class="weui-cell weui-check__label" for="x13">
                            <div class="weui-cell__bd">
                                <p>媒体</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input type="radio" class="weui-check" name="radio1" id="x13">
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>
                    </div>
                </div>
                <!-- end -->
            </div>
            <!--end单行-->
            <!--单行-->
            <div class="weui-flex">
                <!--选项-->
                <div class="weui-flex__item">
                    <div class="placeholder">
                        <label class="weui-cell weui-check__label">
                            <div class="weui-cell__bd">
                                <p>应聘者</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input type="radio" class="weui-check" name="radio1" id="x14">
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>
                    </div>
                </div>
                <!-- end -->
                <!--选项-->
                <div class="weui-flex__item">
                    <div class="placeholder">
                        <label class="weui-cell weui-check__label">

                            <div class="weui-cell__bd">
                                <p>社会公益</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input type="radio" name="radio1" class="weui-check" id="x15">
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>
                    </div>
                </div>
                <!-- end -->
                <!--选项-->
                <div class="weui-flex__item">
                    <div class="placeholder">
                        <label class="weui-cell weui-check__label">
                            <div class="weui-cell__bd">
                                <p>其他</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input type="radio" class="weui-check" name="radio1" id="x16">
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>
                    </div>
                </div>
                <!-- end -->

            </div>
            <!--end单行-->
        </div>
        <!-- end 身份选择-->

        <!--选择区域-->
        <div class="weui-cells__title">选择区域</div>
        <div class="weui-cells">
            <div class="weui-cell weui-cell_select">
                <div class="weui-cell__bd">
                    <select class="weui-select" name="select1">
                        <option selected="" value="1">李沧</option>
                        <option value="2">城阳</option>
                        <option value="3">崂山</option>
                    </select>
                </div>
            </div>

        </div>
        <!--end 选择区域-->

        <!--输入框-->
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" placeholder="请输入姓名"/>
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">手机号</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="tel" placeholder="请输入手机号"/>
                </div>
            </div>
        </div>
        <!--end 输入框-->

        <!--问题内容-->
        <div class="weui-cells__title">问题内容</div>
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <textarea class="weui-textarea" placeholder="请输入详细情况" rows="3"></textarea>
                    <div class="weui-textarea-counter"><span>0</span>/200</div>
                </div>
            </div>
        </div>
        <!--end 问题内容-->

        <!--上传图片-->
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <div class="weui-uploader">
                    <div class="weui-uploader__hd">
                        <p class="weui-uploader__title">附件上传:</p>
                        <div class="weui-uploader__info"><span id="uploadCount">0</span>/5</div>
                    </div>
                    <div class="weui-uploader__bd">
                        <ul class="weui-uploader__files" id="uploaderFiles">
                        </ul>
                        <div class="weui-uploader__input-box">
                            <input id="uploaderInput" class="weui-uploader__input" type="file"  accept="image/jpg,image/jpeg,image/png,image/gif"  multiple="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="weui-gallery" id="gallery">
            <span class="weui-gallery__img" id="galleryImg"></span>
            <div class="weui-gallery__opr">
                <a href="javascript:" class="weui-gallery__del">
                    <i class="weui-icon-delete weui-icon_gallery-delete"></i>
                </a>
            </div>
        </div>
        <!--end上传图片-->
    </div>
    <!--end 盒子-->

</div>
<!--底部按钮-->
<div class="foot-fix-box">
    <a href="" class="foot-btn foot-btn-default">取消</a>
    <a href="" class="foot-btn foot-btn-primary">确认</a>
</div>
<!--底部按钮-->
<script src="js/zepto.min.js"></script>
<script type="text/javascript">

        //上传

        $(function() {

            // 允许上传的图片类型
            var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];
            var maxSize = 1024 * 1024*10; // 10240KB，也就是 10MB
            var maxWidth = 1900;  // 图片最大宽度
            var maxCount = 5;// 最大上传图片数量

            //
            var tmpl = '<li class="weui-uploader__file" id="#ImgID#" style="background-image:url(#url#)">' +
                '</li>',
                $gallery = $("#gallery"),
                $galleryImg = $("#galleryImg"),
                $uploaderInput = $("#uploaderInput"),
                $uploaderFiles = $("#uploaderFiles");

            $uploaderInput.on("change", function (e) {
                files = e.target.files;
                // 如果没有选中文件，直接返回
                if (files.length === 0) {
                    return;
                }
                for (var i = 0, len = files.length; i < len; ++i) {
                    var file = files[i];
                    var imgID = genGUID();
                    var reader = new FileReader();
                    var fileType = file.type;
                    // 如果类型不在允许的类型范围内
                    if (allowTypes.indexOf(file.type) === -1) {

                        alert('该类型不允许上传' + fileType, "forbidden");
                        continue;
                    }

                    if (file.size > maxSize) {
                        alert("图片太大，不允许上传", "forbidden");
                        continue;
                    }

                    if ($('.weui-uploader__file').length >= maxCount) {
                        /*$('.weui-uploader__input-box').hide()*/
                       alert('最多只能上传' + maxCount + '张图片', "forbidden");
                        return;
                    }


                    reader.onload = function (e) {
                        var img = new Image();
                        img.onload = function () {
                            // 不要超出最大宽度
                            var w = Math.min(maxWidth, img.width);
                            // 高度按比例计算
                            var h = img.height * (w / img.width);
                            var canvas = document.createElement('canvas');
                            var ctx = canvas.getContext('2d');
                            // 设置 canvas 的宽度和高度
                            canvas.width = w;
                            canvas.height = h;
                            ctx.drawImage(img, 0, 0, w, h);
                            var base64 = canvas.toDataURL(fileType,0.6); //0.6指的是压缩60%

                            // 插入到预览区
                            $uploaderFiles.append($(tmpl.replace('#url#', base64).replace('#ImgID#', imgID)));

                            var num = $('.weui-uploader__file').length;
                            $('#uploadCount').text(num);

                            // 模拟上传进度
                           /* var progress = 0;
                            function uploading() {
                                $uploaderFiles.find('.weui_uploader_status_content').text(++progress + '%');
                                if (progress < 100) {
                                    setTimeout(uploading, 30);
                                } else {
                                    $uploaderFiles.removeClass('weui_uploader_status').find('.weui_uploader_status_content').remove();//清除上传进度图标
                                }
                            }
                            setTimeout(uploading, 30);*/
                        };

                        img.src = e.target.result;


                        //这里实现上传
                        //$.ajax({});



                    };
                    reader.readAsDataURL(file);

                }
            });



            var index; //第几张图片
            $uploaderFiles.on("click", "li", function () {
                index = $(this).index();
                $galleryImg.attr("style", this.getAttribute("style"));
                $gallery.fadeIn(100);
            });
            $gallery.on("click", function () {
                $gallery.fadeOut(100);
            });

            //删除图片
            $(".weui-gallery__del").click(function () {
                $uploaderFiles.find("li").eq(index).remove();
                var num = $('.weui-uploader__file').length;
                $('#uploadCount').text(num);
            });



            $("#btnsaveCharge").click(function () {


                //或者在这里实现批量上传, 不建议批量上传
            });

        });
        //生成guid
        function genGUID() {
            var G1 = (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1) + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
            var G2 = (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1) + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
            return (G1 + G2);
        }

</script>
</body>
</html>